<template>
  <div class="app-container">
    <div class="titleInfo">
      <el-image :src="deliveryDetailData.detail.personalImagePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
      <div class="carinfo">
        <p>姓名:{{ deliveryDetailData.detail.fullName }}</p>
        <p>
          电话:{{ deliveryDetailData.detail.phonenumber
          }}<el-button link type="primary" v-copy="deliveryDetailData.detail.phonenumber" :icon="DocumentCopy"></el-button>
        </p>
      </div>
      <div v-if="btnStatus" style="float: right; margin-top: 25px">
        <el-button type="danger" size="default" round @click="handleCancelAccount">注销账号</el-button>
      </div>
    </div>
    <div class="baicInfo">
      <div>
        <h2 v-if="!btnStatus" style="margin-bottom: 20px; font-size: 20px; color: red; text-align: center">
          还不能注销账号请完成以下内容才可以注销账号
        </h2>
        <h2 v-else style="margin-bottom: 20px; font-size: 20px; color: green; text-align: center">可以注销账号</h2>
      </div>
      <div>
        <span style="margin-right: 10px; font-size: 14px; color: #666666">账户信息:金额{{ unpaidAmount }}元</span>
        <span>请先体现账户金额方可注销账户</span>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="examineDetail">
import { StationAdmin } from "@/api/interface/city/organizationManage";
import { cancelAdminAccountAPI, getStationAdminDetailAPI, getUnpaidAmountAPI } from "@/api/modules/city/organizationAPI";
import { DocumentCopy } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const btnStatus = ref<boolean>(false);
const deliveryDetailData = ref<StationAdmin.DetailData>({
  detail: {
    userId: 1,
    fullName: "string",
    userName: "string",
    age: -2147483648,
    sex: "string",
    birthday: "2019-08-24T14:15:22.123Z",
    idCardNo: "string",
    phonenumber: "string",
    status: "0",
    reason: "string",
    auditStatus: "0",
    delFlag: "0",
    idCardAuditStatus: "0",
    idCardValidityStatus: "s",
    idCardValidityStartTime: "2019-08-24T14:15:22.123Z",
    idCardValidityEndTime: "2019-08-24T14:15:22.123Z",
    entryDate: "2019-08-24",
    leaveDate: "2019-08-24",
    idCardHeadPhoto: "string",
    idCardBackPhoto: "string",
    personalImagePhoto: "string",
    subsidyAmountStatus: -2147483648,
    workingStatus: -2147483648,
    stageName: "string",
    secondStageList: [
      {
        stageId: "string",
        stageName: "string"
      }
    ]
  },
  healthCertificate: {
    id: 1,
    validStartTime: "2019-08-24T14:15:22.123Z",
    validEndTime: "2019-08-24T14:15:22.123Z",
    status: 1,
    healthCertificateUrl: "string"
  },
  driverLicense: [
    {
      id: 1,
      drivingLicenseTypeName: "string",
      drivingLicensePhoto: "string",
      drivingLicenseNo: "string",
      drivingLicenseYears: "string",
      actualDrivingYears: "string",
      drivingLicenseValidityStartTime: "2019-08-24T14:15:22.123Z",
      drivingLicenseValidityEndTime: "2019-08-24T14:15:22.123Z",
      status: 1
    }
  ],
  vehicle: [
    {
      id: 1,
      vehicleTypeName: "string",
      vehicleCode: "string",
      vehicleNumber: "string",
      vchicleDepositId: -2147483648,
      vehicleDeposit: 0,
      vehicleUsageFee: 0,
      vehicleUsageFeeId: -2147483648,
      vehicleTypeFrontalView: "string",
      vehicleTypeBackView: "string",
      vehicleTypeLeftView: "string",
      vehicleTypeRightView: "string",
      driverLicenseTypeName: "string"
    }
  ]
});
const detailData = ref<StationAdmin.Detail[]>([]);
const healthCertificateData = ref<StationAdmin.HealthCertificate[]>([]);
const stageList = ref<StationAdmin.Stage[]>([]);
const handleCancelAccount = () => {
  ElMessageBox.confirm("确认注销该账号吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      cancelAdminAccount();
    })
    .catch(() => {
      console.log("取消操作");
    });
};
const getStationAdminDetailData = async (userId: number) => {
  const { code, data, msg } = await getStationAdminDetailAPI(userId);
  if (code == "200" && data) {
    if (data.healthCertificate) {
      healthCertificateData.value[0] = data.healthCertificate;
    }
    if (data.stageList) {
      stageList.value = data.stageList;
    }
    if (data.detail) {
      detailData.value[0] = data.detail;
    }
    deliveryDetailData.value = data;
  } else {
    ElMessage.error(msg);
  }
};
const cancelAdminAccount = async () => {
  const { code, msg } = await cancelAdminAccountAPI({ userId: Number(route.query.id) });
  if (code == "200") {
    ElMessage.success("注销成功");
    router.push({ path: "/cityLevel/cityOrganization/cityStationer/passed" });
  } else {
    ElMessage.error(msg);
  }
};
const unpaidAmount = ref<string>("");
const getUnpaidAmount = async () => {
  const { code, data, msg } = await getUnpaidAmountAPI({ userId: Number(route.query.id) });
  if (code == "200" && data) {
    unpaidAmount.value = data.balance;
    if (data.balance) {
      btnStatus.value = false;
    } else {
      btnStatus.value = true;
    }
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getStationAdminDetailData(Number(route.query.id));
  getUnpaidAmount();
});
</script>

<style lang="scss" scoped>
body {
  .app-container {
    padding: 15px;
    background-color: white;
  }

  font-size: 13px;
  .titleInfo {
    margin-bottom: 10px;
    span {
      margin-right: 70px;
      font-size: 13px;
      color: gray;
    }
    .carinfo {
      display: inline-block;
      padding: 0;
      margin-right: 11.59%;
      margin-left: 15px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
      p {
        // padding: 10px 0;
        height: 40px;
        margin: 0;
        line-height: 40px;
        vertical-align: middle;
        .el-button {
          margin-left: 5px;
        }
        .el-switch {
          padding: 0;
          margin-left: 5px;
        }
      }
    }
    .carstatus {
      display: inline-block;
      float: right;
      margin-right: -135px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
    }
  }
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    div {
      margin-top: 12px;
    }
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
  .btn-container {
    text-align: right;
  }
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
